---
sidebar_position: 7
---

# withClamp

`withClamp` is an [animation modifier](/docs/fundamentals/glossary#animation-modifier) that lets you limit the scope of movement of your animation to make it stay within some predefined range.
Use it with [withSpring](/docs/animations/withSpring) animation.

import { useClampPlayground } from '@site/src/components/InteractivePlayground';

<InteractivePlayground usePlayground={useClampPlayground} />

## Reference

```javascript
import { withClamp } from 'react-native-reanimated';

function App() {
  sv.value = withClamp({ min: -1, max: 1 }, withSpring(0));
  // ...
}
```

<details>
<summary>Type definitions</summary>

```typescript
type AnimatableValue = number | string | number[];

function withClamp<T extends number | string>(
  config: {
    min?: T;
    max?: T;
  },
  clampedAnimation: T
): T;

enum ReduceMotion {
  System = 'system',
  Always = 'always',
  Never = 'never',
}
```

</details>

### Arguments

#### `config`

An object with following properties:

| Name             | Type Description |
| ---------------- | ---------------- | ------------------------------------------------ |
| min <Optional /> | `number`         | The lowest value your animation can ever reach   |
| max <Optional /> | `number`         | The greatest value your animation can ever reach |

#### `animation`

The spring animation you want to clamp.

```typescript
const clampedStyleWithDelay = useAnimatedStyle(() => {
  return {
    width: withClamp({ min: 0, max: 100 }, withSpring(randomWidth.value)),
  };
});
```

### Returns

`withClamp` returns an [animation object](/docs/fundamentals/glossary#animation-object). It can be either assigned directly to a [shared value](/docs/fundamentals/glossary#shared-value) or can be used as a value for a style object returned from [useAnimatedStyle](/docs/core/useAnimatedStyle).

<PlatformCompatibility android ios web />
